<?php if (!defined('THINK_PATH')) exit();?><!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>直播表演 录像页面</title>      
</head>
<body>
<div class="box">
   
    <div class="gift">
        <video autoplay id="sourcevid" style="width:320;height:240px"></video>
        <canvas id="output" style="display:none"></canvas>
    </div>
    </div>
</div>

<script src="../show/js/sea.js"></script>
<script src="../show/js/jquery.min.js?v=2.1.4"></script>
<script src="../show/js/bootstrap.min.js?v=3.3.6"></script>
<script>
    seajs.config({
        alias:{
            'jquery':'../show/js/jquery.js'
        }
    })
    seajs.use('../show/js/main.js')

</script>
<script type="text/javascript" charset="utf-8">

    var socket = new WebSocket("ws://"+document.domain+":8080");
    var back = document.getElementById('output');
    var backcontext = back.getContext('2d');
    var video = document.getElementsByTagName('video')[0];

    var success = function(stream){
        video.src = window.URL.createObjectURL(stream);
    }

    socket.onopen = function(){
        draw();
    }

    var draw = function(){
        try{
            backcontext.drawImage(video,0,0, back.width, back.height);
        }catch(e){
            if (e.name == "NS_ERROR_NOT_AVAILABLE") {
                return setTimeout(draw, 100);
            } else {
                throw e;
            }
        }
        if(video.src){
            socket.send(back.toDataURL("image/jpeg", 0.5));
        }
        setTimeout(draw, 100);
    }
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia || navigator.msGetUserMedia;
    navigator.getUserMedia({video:true, audio:false}, success, console.log);
</script>
</body>
</html>